<template>
  <div id="add">
    <van-nav-bar title="添加用户" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="name"
        name="姓名"
        label="姓名"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        v-model="age"
        type="number"
        name="年龄"
        label="年龄"
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写年龄' }]"
      />
      <van-field
        readonly
        clickable
        name="picker"
        :value="type.text"
        label="分类"
        placeholder="点击选择分类"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <van-field
        readonly
        clickable
        name="calendar"
        :value="birthday"
        label="生日"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
      <van-calendar v-model="showCalendar" @confirm="onConfirmBirth" />

      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader
            v-model="uploader"
            :after-read="uploadImg"
            multiple
            :max-count="1"
          />
        </template>
      </van-field>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";

export default {
  data() {
    return {
      name: "",
      age: "",
      birthday: "",
      type: "",
      columns: [
        { id: 1, text: "学生" },
        { id: 2, text: "老师" },
        { id: 3, text: "工人" },
      ],
      showCalendar: false,
      showPicker: false,
      uploader: [],
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      axios
        .post("/api/user/doadd.html ", {
          name: this.name,
          age: this.age,
          icon: this.icon,
          birthday: this.birthday,
          type: this.type.id,
        })
        .then((res) => {
          var data = res.data;
          var json = eval("(" + data + ")");
          console.log(json.code);

          if (json.code == 200) {
            Toast.success("添加成功");
            location.reload();
          } else {
            Toast.fail("添加失败");
          }
        });
    },
    onClickLeft() {
      this.$router.go(-1);
      console.log("houtui");
    },
    onConfirm(value) {
      this.type = value;
      this.showPicker = false;
    },
    onConfirmBirth(date) {
      this.birthday = `${date.getFullYear()}/${
        date.getMonth() + 1
      }/${date.getDate()}`;
      this.showCalendar = false;
    },
    uploadImg(file) {
      console.log(file);

      let formData = new FormData();
      formData.append("image", file.file);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      axios
        .post("/api/upload/upload.html", formData, config)
        .then((res) => {
          console.log(res);
          this.icon = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="sass" scoped>
>>> .van-nav-bar
  background: dodgerblue
  color: white
  .van-icon
    color: white
>>> .van-nav-bar__title
  color: white
</style>